<template>
  <d2-container>
    <div class="d-f flex-1 page-box">
      <div class="topic-type">
        <div class="my-1">
          <div class="ml-2">
            <el-button type="primary" size="mini" @click="addTopictypeOpen">添加类型</el-button>
          </div>
        </div>
        <div class="flex-1 mx-1">
          <el-table :data="topictypeList" stripe>
            <el-table-column align="center" prop="serial" width="45" />
            <el-table-column label="题目类型" prop="type_name" width="70" />
            <el-table-column align="center" label="操作" width="60">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" content="修改题目类型" placement="top-start">
                  <i class="el-icon-edit mr-1 cp" @click="topictypeHandleEdit(scope.row.id)"></i>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="删除题目类型" placement="top-start">
                  <i class="el-icon-delete cp" @click="topictypeHandleDelete(scope.row.id)"></i>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="examination-peview">
        <div class="flex-1 mt-3 row-a-j-fc">
          <div class="font-s-4 font-w">{{ examinationDetail.examination_name }}</div>
          <div class="font-s-2 text-light-grey mt-1">(试卷预览)</div>
        </div>
        <div class="flex-1 mx-3 mt-3">
          <div class="flex-1" v-for="(item, index) in topictypeList" :key="index">
            <div class="font-s-3 flex-1 row-ac">
              <div>{{ item.serial }}、</div>
              <div>{{ item.type_name }}</div>
              <div class="font-s-2 ml-1">( {{ item.total_score }}分 )</div>
            </div>
            <div class="flex-1 mt-1 cp" v-for="(topic, index1) in item.topicList" :key="index1"
              @click="updateTopic(topic.id)">
              <div class="ml-1 row-ac flex-1">
                <div class="font-s-2"><span>{{ topic.serial }}、</span>{{ topic.topic_name }}<span
                    class="font-s-1 ml-1">(
                    {{ topic.fraction }}分 )</span><span class="font-s-2 ml-1">( )</span></div>
              </div>
              <div class="flex-1 row-ac-fw mt-2 ml-3">
                <div class="examination-answer mb-2 d-f font-s-1" v-for="(answer,index2) in topic.answeraboutList"
                  :key="index2">
                  <div>{{ answer.serial }}、</div>
                  <div class="flex-1 mr-1">
                    <div class="" v-if="answer.answer_content">{{ answer.answer_content }}</div>
                    <div class="flex-1 row" v-if="answer.answer_cover">
                      <el-image class="answer-cover" :src="answer.answer_cover" :fit="cover"></el-image>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="topic-box">
        <div class="flex-1 mx-3 mt-3">
          <div class="pb-4 flex-1 row font-s-3">添加/修改题目</div>
          <div class="">
            <el-form :model="formTopic" ref="form" label-width="80px">
              <div>
                <el-form-item label="序列" prop="serial">
                  <div style="width: 40%;">
                    <el-input v-model="formTopic.serial"></el-input>
                  </div>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="题目名称" prop="topic_name">
                  <div style="width: 100%;">
                    <el-input v-model="formTopic.topic_name" type="textarea" rows="4"></el-input>
                  </div>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="题目类型" prop="topic_type">
                  <el-select v-model="formTopic.topic_type" placeholder="题目类型">
                    <el-option v-for="item in topictypeList" :key="item.id" :label="item.type_name"
                      :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="题目分数" prop="fraction">
                  <div style="width: 40%;">
                    <el-input-number v-model="formTopic.fraction" :min="1" :max="100" label="题目分数" />
                  </div>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="排序" prop="sort">
                  <div style="width: 40%;">
                    <el-input-number v-model="formTopic.sort" :min="0" :max="100" label="排序" />
                  </div>
                </el-form-item>
              </div>
            </el-form>
          </div>
          <div class="flex-1 mt-2" v-if="answerAboutBottom">
            <div class="ml-2">
              <el-button type="primary" size="mini" plain @click="addAnswerAboutOpen">添加答案</el-button>
            </div>
            <div class="flex-1 mt-3 ml-2">
              <div class="px-1 py-1 flex-1 row-ac font-s-2" v-for="(item,index) in getAnsweraboutList" :key="index">
                <div>{{ item.serial }}、</div>
                <div class="flex-1">{{ item.answer_content }}</div>
                <div>
                  <el-tooltip class="item" effect="dark" content="修改题目类型" placement="top-start">
                    <i class="el-icon-edit mr-1 cp" @click="topictypeHandleEdit(item.id)"></i>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="删除题目类型" placement="top-start">
                    <i class="el-icon-delete cp" @click="topictypeHandleDelete(item.id)"></i>
                  </el-tooltip>
                </div>
              </div>
            </div>
          </div>
          <div class="flex-1 row mt-3">
            <el-button type="primary"  @click="resettingTopic">重置</el-button>
            <el-button type="primary" v-if="!addTopicStata" @click="submitTopicForm">修改</el-button>
            <el-button type="primary" v-if="addTopicStata" @click="addTopicForm">保存</el-button>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogTopictypeVisible" width="30%" title="添加/修改题目类型">
      <el-form :model="formTopictype" ref="form" label-width="80px">
        <el-form-item label="序列" prop="serial">
          <div style="width: 60%;">
            <el-input v-model="formTopictype.serial" size="mini"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="题目类型" prop="type_name">
          <div style="width: 50%;">
            <el-input v-model="formTopictype.type_name" size="mini"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <div style="width: 18%;">
            <el-input v-model="formTopictype.sort" size="mini"></el-input>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogTopictypeVisible = false">取 消</el-button>
        <el-button type="primary" v-if="!addTopictypeStata" @click="submitTopictypeForm">修改</el-button>
        <el-button type="primary" v-if="addTopictypeStata" @click="addTopictypeForm">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogAnswerAboutVisible" width="30%" title="添加/修改答案">
      <el-form :model="formAnswerAbout" ref="form" label-width="80px">
        <el-form-item label="序列" prop="serial">
          <div style="width: 60%;">
            <el-input v-model="formAnswerAbout.serial" size="mini"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="答案内容" prop="answer_content">
          <div style="width: 50%;">
            <el-input v-model="formAnswerAbout.answer_content" size="mini"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="图片" prop="answer_cover">
          <div>
            <el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false"
              :on-success="handleAnswerAboutSuccess">
              <img v-if="formAnswerAbout.answer_cover" :src="formAnswerAbout.answer_cover" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <div style="width: 18%;">
            <el-input v-model="formAnswerAbout.sort" size="mini"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="题目" prop="topic">
          <el-select v-model="formAnswerAbout.topic" placeholder="选择题目">
            <el-option v-for="item in topicList" :key="item.id" :label="item.topic_name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogAnswerAboutVisible = false">取 消</el-button>
        <el-button type="primary" v-if="!addAnswerAboutStata" @click="submitAnswerAboutForm">修改</el-button>
        <el-button type="primary" v-if="addAnswerAboutStata" @click="addAnswerAboutForm">保存</el-button>
      </div>
    </el-dialog>
  </d2-container>
</template>

<script>
  import {
    examinationDetailUrl,
    topictypeDeleteUrl,
    topictypeUpdateUrl,
    topictypeCreateUrl,
    topictypeDetailUrl,
    topictypeListUrl,
    topicDeleteUrl,
    topicUpdateUrl,
    topicCreateUrl,
    topicDetailUrl,
    topicListUrl,
    answeraboutDeleteUrl,
    answeraboutUpdateUrl,
    answeraboutCreateUrl,
    answeraboutDetailUrl,
    answeraboutListUrl,
  } from '@/utils/answer'
  import {
    imagesUploadUrl
  } from "@/utils/interface"
  import {
    baseURL
  } from '@/utils/request'
  export default {
    data() {
      return {
        examinationDetail: '',
        getExaminationId: '',
        topictypeList: [],
        dialogTopictypeVisible: false,
        addTopictypeStata: false,
        queryInfo: {
          examination_id: '',
          page: 1,
          pageSize: 10
        },
        formTopictype: {
          serial: '',
          type_name: '',
          sort: ''
        },
        formTopic: {
          serial: '',
          topic_name: '',
          topic_type: '',
          sort: '',
          fraction: 0,
          answeraboutList: []
        },
        taketopictypeId: '',
        addTopicStata: true,
        taketopicId: '',
        answeraboutStata: false,
        actionUrl: baseURL + imagesUploadUrl,
        dialogAnswerAboutVisible: false,
        addAnswerAboutStata: true,
        answerAboutBottom: false,
        formAnswerAbout: {
          serial: '',
          answer_content: '',
          answer_cover: '',
          sort: '',
          topic: ''
        },
        topicList: [],
        getAnsweraboutList: []
      }
    },
    mounted() {
      if (this.$route.query.examinationId) {
        this.getExaminationId = this.$route.query.examinationId
        this.queryInfo.examination_id = this.$route.query.examinationId
        this.getExaminationDetail()
      }
    },
    created() {
      this.getTopictypeList()
      this.getTopicList()
    },
    methods: {
      getExaminationDetail() {
        this.$get(examinationDetailUrl + this.getExaminationId + '/').then(res => {
          this.examinationDetail = res.data.data
        })
      },
      getTopictypeList() {
        this.$get(topictypeListUrl, this.queryInfo).then(res => {
          this.topictypeList = res.data.data.list
        })
      },
      getTopicList() {
        this.$get(topicListUrl).then(res => {
          this.topicList = res.data.data.list
        })
      },
      addTopictypeOpen() {
        this.dialogTopictypeVisible = true
        this.addTopictypeStata = true
      },
      topictypeHandleEdit(topictypeId) {
        this.dialogTopictypeVisible = true
        this.addTopictypeStata = false
        this.taketopictypeId = topictypeId
        this.$get(topictypeDetailUrl + topictypeId + '/').then(res => {
          this.formTopictype = {
            serial: res.data.data.serial,
            type_name: res.data.data.type_name,
            sort: res.data.data.sort
          }
        })
      },
      submitTopictypeForm() {
        this.$put(topictypeUpdateUrl + this.taketopictypeId + '/', this.formTopictype).then(res => {
          if (res.data.code == 200) {
            this.dialogTopictypeVisible = false
            this.formTopictype = {}
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
            this.getTopictypeList()
          }
        })
      },
      topictypeHandleDelete(topictypeId) {
        this.$confirm('此操作将删除该类目?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$del(topictypeDeleteUrl + topictypeId + '/').then(res => {
            if (res.data.code == 200) {
              this.$message({
                type: 'danger',
                message: '删除成功!'
              });
              this.getTopictypeList()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
      addTopictypeForm() {
        this.$post(topictypeCreateUrl, this.formTopictype).then(res => {
          if (res.data.code == 200) {
            this.dialogTopictypeVisible = false
            this.$message({
              type: 'success',
              message: '添加成功!'
            });
            this.getTopictypeList()
            this.formTopictype = {}
          }
        })
      },
      addTopicForm() {
        this.$post(topicCreateUrl, this.formTopic).then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: 'success',
              message: '添加成功!'
            });
            this.getTopictypeList()
            this.formTopic = {}
          }
        })
      },
      updateTopic(topicId) {
        this.addTopicStata = false
        this.answerAboutBottom = true
        this.taketopicId = topicId
        this.getTopicDetail()
      },
      getTopicDetail() {
        this.$get(topicDetailUrl + this.taketopicId + '/').then(res => {
          if (res.data.code == 200) {
            this.formTopic = {
              serial: res.data.data.serial,
              topic_name: res.data.data.topic_name,
              topic_type: res.data.data.topic_type,
              sort: res.data.data.sort,
              fraction: res.data.data.fraction,
              answeraboutList: res.data.data.answeraboutList
            }
            this.getAnsweraboutList = this.formTopic.answeraboutList
            this.formAnswerAbout.topic = res.data.data.id
          }
        })
      },
      submitTopicForm() {
        this.$put(topicUpdateUrl + this.taketopicId + '/', this.formTopic).then(res => {
          if (res.data.code == 200) {
            this.addTopicStata = true
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
            this.getTopictypeList()
            this.formTopic = {}
          }
        })
      },
      resettingTopic(){
        this.addTopicStata = true
        this.answerAboutBottom = false
        this.formTopic = {}
        this.getAnsweraboutList = []
      },
      addAnswerAboutOpen() {
        this.dialogAnswerAboutVisible = true
        this.addAnswerAboutStata = true
      },
      handleAnswerAboutSuccess(avl) {
        this.formAnswerAbout.answer_cover = avl.data.url
      },
      submitAnswerAboutForm() {

      },
      addAnswerAboutForm() {
        this.$post(answeraboutCreateUrl, this.formAnswerAbout).then(res => {
          if (res.data.code == 200) {
            this.dialogAnswerAboutVisible = false
            this.$message({
              type: 'success',
              message: '添加成功!'
            });
            this.getTopicList()
            this.getTopicDetail()
            this.getTopictypeList()
            this.formAnswerAbout = {}
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .page-box {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
  }

  .topic-type {
    width: 30%;
    height: 900px;
    background-color: #F5F5F5;
  }

  .examination-peview {
    width: 800px;
    height: 900px;
  }

  .topic-box {
    width: 40%;
    height: 900px;
    background-color: #F5F5F5;
    overflow-y: scroll;
  }

  .examination-answer {
    width: 45%;
    margin-right: 10%;

    &:nth-child(2n) {
      margin-right: 0;
    }

    .answer-cover {
      width: 100%;
    }
  }
</style>
